<template>
  <div class="per">
    <div class="top">

        <van-icon name="setting-o" class="icon2" />
        <van-icon name="chat-o" class="icon1"/>
       
    </div>
    <div class="denglu">
        <img src="https://static.asus.com.cn/static/wap/newPages/images/avatar.png" alt="">
        <p >{{x}}</p>
        <van-icon name="arrow"  class="icon3"/>
        <div class="qiandao" @click="fun">
            <img src="https://static.asus.com.cn/static/wap/newPages/images/icon4.png" alt="">
            登录
        </div>
    </div>

    <div class="jifen">
        <div class="box">
            <p>-</p>
            <p>卡券</p>
        </div>
        <div class="box">
            <p>-</p>
            <p>积分</p>
        </div>
    </div>
    <div class="bottom">
        <img src="https://static.asus.com.cn/static/wap/newPages/images/member.png" alt="">
        <p>注册领888礼包及2000积分</p>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
        }
    },
    props: ["x"]
    , 
    mounted() {
    },
    methods: {
        fun() {
            this.$router.push("/denglu")
        }
    }
}
</script>

<style lang="scss" scoped>
.per{
    height: 72vw;
    background-image: url("https://static.asus.com.cn/static/wap/newPages/images/bg.png");
    overflow: hidden;
    .bottom{
        width: 95vw;
        height: 18vw;
        margin: auto;
        background-color: antiquewhite;
        margin-top: 6vw;
        border-radius: 5vw 5vw 0vw 0vw;
        background: linear-gradient(270deg,#0f286c 0%, #2255b0 100%);
        img{
            height: 6.5vw;
            margin: 4vw 4vw 0 4vw;
        }
        p{
            margin: 0;
            color: white;
            font-size: 1vw;
            text-indent: 2vw;
        }
    }
    .jifen{
        width: 100vw;
        height: 12vw;
        display: flex;
        justify-content: space-around;
        margin: 4vw 0;
        .box{
            width: 10vw;
            height: 12vw;
            p{
                display: block;
                width: 10vw;
                height: 6vw;
                margin: 0;
                text-align: center;
                font-size: 3vw;
            }
        }
    }
    .denglu{
        height: 18vw;
        margin: 4vw 0;
        img{
            height: 16vw;
            margin-top: 1vw;
            margin-left: 5vw;
            float: left;
        }
        p{
            float: left;
            text-indent: 4vw;
            line-height: 18vw;
            color: #22253c;
        }
        .icon3{
            font-size: 2vw;
            text-indent: 1vw;
            line-height: 18vw;
        }
        .qiandao{
            background-color:#e4513f;
            width: 17vw;
            height: 8vw;
            float: right;
            border-radius: 5vw;
            font-size: 3.8vw;
            line-height: 8vw;
            color: white;
            margin: 5vw;
            img{
                width: 6vw;
                height: 6vw;
                margin:1vw 0vw 0 2vw;
            }
        }

    }
    .top{
        height: 10vw;
        .icon1{
            font-size: 6vw;
            line-height: 10vw;
            float: right;
            margin-right: 4vw;

        }
        .icon2{
            font-size: 6vw;
            line-height: 10vw;
            float: right;
            margin-right: 4vw;
        }
    }
}

</style>